<template>
	<view class="content">
		<!-- 电量显示栏-->
		<view class="top_nav">
			<view class="kong"></view>
			<!-- <image src="../../static/buy/1.png"></image> -->
			<view class="tab_item">
				<view class="return" @click="returnPage">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/course/jiantou.png"></image>
				</view>
				<view class="title">通证中心</view>
				<view class="return"></view>
			</view>
		</view>
		
		<!-- 平台行情 -->
		<view class="platform_market">
			<view class="platform_title">平台行情</view>
			<view class="all_value">总价值(元):<text>0</text></view>
			<view class="stock_wrap">
				<view class="stock_item">
					<view class="stock_num">0</view>
					<view class="stock_name">总发行量(股)</view>
				</view>
				<view class="stock_item">
					<view class="stock_num1">0</view>
					<view class="stock_name">流通量(股)</view>
				</view>
				<view class="stock_item">
					<view class="stock_num2">0</view>
					<view class="stock_name">价格(股/元)</view>
				</view>
			</view>
		</view>
		
		<!-- 我的持仓 -->
		<view class="my_position">
			<view class="position_title">我的持仓</view>
			<view class="position_con">
				<view class="position_top">
					<view class="top_left">占比:<text>0%</text></view>
					<view class="top_right">收益率:<text>0%</text></view>
				</view>
				<view class="position_bottom">锁定:<text>0</text></view>
			</view>
		</view>
		
		<view class="btn_box">
			<!-- <view class="btn_left">
				<view class="btn">售出</view>
			</view>
			<view class="btn_right">
				<view class="btn1">购买</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			returnPage(){
			    uni.navigateBack({
			     delta:1
			    })
			   },
		}
	}
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 100%;
		background: #282828;
	}
	
.content{
	width: 100%;
	position: relative;
	.top_nav{
		width: 100%;
		height: 160upx;
		background-image: url('https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/buy/1.png');
		background-size: cover;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		.kong{
			width: 100%;
			height: 60upx;
		}
		.tab_item{
			width: 90%;
			margin: 0 auto;
			height: 100upx;
			display: flex;
			align-items: center;
			justify-content: center;
			.return{
				flex: 1;
				width: 100%;
				image{
					width: 29upx;
					height: 29upx;
				}
			}
			.title{
				flex: 8;
				width: 100%;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 10;
			}
		}
	}
	.platform_market{
		width: 90%;
		margin: 0 auto;
		padding-top: 200upx;
		.platform_title{
			width: 200upx;
			height: 60upx;
			border-radius: 0 0 30upx 0;
			background: linear-gradient(left,#eecf9b,#b8965c);
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
		}
		.all_value{
			width: 100%;
			height: 200upx;
			border-radius: 30upx;
			margin: 30upx 0;
			background-image: linear-gradient(top,#7c7c7f,#17171a);
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--themeColor);
			text{
				padding-left: 10upx;
				font-size: 50upx;
				font-weight: bold;
				color: #f70b0b;
			}
		}
		.stock_wrap{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			.stock_item{
				width: 32%;
				height: 200upx;
				border-radius: 30upx;
				background-image: linear-gradient(top,#7c7c7f,#17171a);
				margin-right: 2%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.stock_num{
					font-size: 45upx;
					color: #1bcd12;
				}
				.stock_num1{
					font-size: 45upx;
					color: #6877ff;
				}
				.stock_num2{
					font-size: 45upx;
					color: #de8523;
				}
				.stock_name{
					color: #FFFFFF;
					padding-top: 20upx;
				}
			}
			.stock_item:last-child{
				margin-right: none;
			}
		}
	}
	.my_position{
		width: 90%;
		margin: 0 auto;
		.position_title{
			width: 200upx;
			height: 60upx;
			margin-top: 40upx;
			border-radius: 0 0 30upx 0;
			background: linear-gradient(left,#eecf9b,#b8965c);
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
		}
		.position_con{
			width: 100%;
			height: 250upx;
			margin: 20upx 0;
			border-radius: 30upx;
			background-image: linear-gradient(top,#33f5ff,#211abd);
			display: flex;
			flex-direction: column;
			justify-content: center;
			.position_top{
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FFFFFF;
				.top_left{
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					text{
						font-size: 50upx;
						padding-left: 10upx;
					}
				}
				.top_right{
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					text{
						font-size: 50upx;
						padding-left: 10upx;
					}
				}
			}
			.position_bottom{
				padding: 10upx 40upx;
				color: #FFFFFF;
				text{
					font-size: 50upx;
					padding-left: 10upx;
					color: #f70b0b;
				}
			}
		}
	}
	.btn_box{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 200upx;
		color: #FFFFFF;
		.btn_left{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			.btn{
				width: 250upx;
				height: 70upx;
				border:2upx solid #7c7c7c;
				background: #005e15;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.btn_right{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			.btn1{
				width: 250upx;
				height: 70upx;
				border:2upx solid #7c7c7c;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #a40000;
			}
		}
	}
}
</style>
